<template>
  <div class="container">
    <div class="top" style="height: 5%;">
      <span class="title">场地实景</span>
    </div>
    <div class="content" v-if="picts.length != 0">
      <div class="pict" v-for="(item, idx) in picts" :key="idx" @mouseover="setHoverIndex(idx)"
      @mouseout="setHoverIndex(null)" @click="imgDetail(idx)">
        <el-image class="inner_pict" :src="item.imageUrl" :alt="item.ossPath" />
        <div class="desc" :class="{ 'show': hoveredIndex === idx }">
          <span class="pictInfo">{{ item.cameraName }}</span>
          <span class="pictInfo">{{ formatISODate(item.createTime) }}</span>
        </div>
      </div>
    </div>
    <div class="noneCase" v-if="picts.length == 0">
      暂无数据
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    :title="tips"
    width="80%"
    top="5vh"
  >
    <div style="display: flex;align-items: center;justify-content: center;overflow: hidden;">
      <el-image :src="imgSrc" lazy loading="lazy" fit="contain"></el-image>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { getRecentOperationPict } from '../../api/file';
import { ElMessage } from 'element-plus';
import useOperationStore from '../../store/operation';
let hoveredIndex=ref(null)
const setHoverIndex=(idx)=>{
  hoveredIndex.value=idx
}
// 业务图片集
let picts = reactive([

])

// 日期格式转换
const formatISODate = (isoDate) => {
  let date = new Date(isoDate);
  let year = date.getFullYear();
  let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
  let day = String(date.getDate()).padStart(2, '0');
  let hours = String(date.getHours()).padStart(2, '0');
  let minutes = String(date.getMinutes()).padStart(2, '0');
  let seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

let operationStore=useOperationStore()
let operationId = ref(operationStore.data.length>0?operationStore.data[operationStore.index].id:'')
operationStore.$subscribe(async(mutation, state)=>{
  operationId.value=operationStore.data[operationStore.index].id
  await initData()
})

// 请求图片数据
const initData = async () => {
  let res = await getRecentOperationPict(operationId.value);
  switch (res.code) {
    case 0:
      picts.splice(0, picts.length)
      picts.push(...res.data)
      break;
    case 1:
      setTimeout(() => { $router.push('/login') }, 1000)
      break;
  }
}

// el-dialog
let dialogVisible = ref(false)
let tips=ref('')
let imgSrc=ref('')
const imgDetail=(idx)=>{
  dialogVisible.value = true
  tips.value=picts[idx].cameraName
  imgSrc.value=picts[idx].imageUrl
}


onMounted(async () => {
  if (operationId.value) {
    await initData()
  }
})
</script>

<style lang="scss" scoped>
.show{
  display: flex !important;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid rgb(212, 207, 207);
  box-sizing: border-box;
  padding: 1% 3%;
  border-radius: 15px;

  .top {
    width: 96%;
    min-height: 10%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    align-items: center;
    margin-bottom: 1%;
    flex-shrink: 0;
    flex-grow: 0;

    .title {
      font-weight: 700;
      border-left: 3px solid rgb(9, 184, 199);
      padding: 5px 10px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
    }
  }

  .content {
    margin-bottom: 2%;
    flex: 1;
    width: 96%;
    overflow-y: auto;
    display: grid;
    box-sizing: border-box;
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(3, 33.3%);


    .pict {
      position: relative;
      margin: 1px;
      box-sizing: border-box;


      .inner_pict {
        width: 100%;
        height: 100%;
      }

      .desc {
        display: none;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.6);
        left: 0;
        bottom: 0;
        width: 98%;
        z-index: 999;
        overflow: hidden;
        flex-direction: column;
        padding-left: 5px;

        .pictInfo {
          color: white;
          font-size: 12px;
        }
      }
    }
  }

  .noneCase {
    flex: 1;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: rgb(169, 166, 166);
    font-weight: 700;
  }

}
</style>